<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org" id = "html" th:attr = "theme = ${theme}">
    <head>
        <meta charset = "UTF-8">
        <title th:text = "${info.setup.serverName}"></title>
        <link rel = "shortcut icon" type = "image/x-icon" th:href = "@{/img/ico/favicon.ico}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/assets/bootstrap.min.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/animations.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/colors.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/dimensions.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/fonts.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/gradients.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/layout.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/shadows.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/themes.css}" />
        <script type = "text/javascript" th:src = "@{/js/assets/chart.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/assets/three.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/assets/vanta.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/background.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/chart.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/globals.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/index.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/labels.js}"></script>
        <script type = "text/javascript" th:inline = "javascript"> globalsInitialization(); </script>
    </head>
    <body id = "background">
        <script type = "text/javascript" th:inline = "javascript"> backgroundInitialization(); </script>
        <div class = "container index">
            <div class = "row">
                <div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
                    <div class = "card">
                        <div class = "header">
                            <div class = "hw-logo first"></div>
                            <div class = "label-hw-info">
                                <div class = "hw-type">Processor</div>
                                <div class = "hw-name" th:text = "${info.processor.name}"></div>
                            </div>
                        </div>
                        <div class = "usage">
                            <div class = "card-body-squares-grid first">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class = "main-hw-info">
                                <div class = "hw-usage">
                                    <div class = "usage-value">
                                        <span id = "processor-hundreds" class = "first">0</span>
                                        <span id = "processor-tens" class = "second">0</span>
                                        <span id = "processor-ones" class = "third">0</span>
                                    </div>
                                    <div class = "usage-postfix">%</div>
                                </div>
                                <p class = "info-label">PROCESSOR USAGE</p>
                                <div class = "usage-underline first"></div>
                            </div>
                        </div>
                        <div class = "footer first">
                            <div class = "card-footer-dots-grid">
                                <div class = "first">
                                    <div class = "inner-dot"></div>
                                </div>
                                <div class = "second">
                                    <div class = "inner-dot"></div>
                                </div>
                                <div class = "third">
                                    <div class = "inner-dot"></div>
                                </div>
                            </div>
                            <div class = "detailed-hw-info">
                                <div class = "first" th:text = "${info.processor.coreCount}"></div>
                                <div id = "currentClockSpeed" class = "second" th:text = "${info.processor.clockSpeed}"></div>
                                <div class = "third" th:text = "${info.processor.bitDepth}"></div>
                            </div>
                            <div class = "dividers">
                                <div class = "first"></div>
                                <div class = "second"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
                    <div class = "card">
                        <div class = "header">
                            <div class = "hw-logo second"></div>
                            <div class = "label-hw-info">
                                <div class = "hw-type">Machine</div>
                                <div class = "hw-name" th:text = "${info.machine.operatingSystem}"></div>
                            </div>
                        </div>
                        <div class = "usage">
                            <div class = "card-body-squares-grid second">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class = "main-hw-info">
                                <div class = "hw-usage">
                                    <div class = "usage-value">
                                        <span id = "ram-hundreds" class = "first">0</span>
                                        <span id = "ram-tens" class = "second">0</span>
                                        <span id = "ram-ones" class = "third">0</span>
                                    </div>
                                    <div class = "usage-postfix">%</div>
                                </div>
                                <p class = "info-label">RAM USAGE</p>
                                <div class = "usage-underline second"></div>
                            </div>
                        </div>
                        <div class = "footer second">
                            <div class = "card-footer-dots-grid">
                                <div class = "first">
                                    <div class = "inner-dot"></div>
                                </div>
                                <div class = "second">
                                    <div class = "inner-dot"></div>
                                </div>
                                <div class = "third">
                                    <div class = "inner-dot"></div>
                                </div>
                            </div>
                            <div class = "detailed-hw-info">
                                <div class = "first" th:text = "${info.machine.totalRam}"></div>
                                <div class = "second" th:text = "${info.machine.ramTypeOrOSBitDepth}"></div>
                                <div id = "currentProcCount" class = "third" th:text = "${info.machine.procCount}"></div>
                            </div>
                            <div class = "dividers">
                                <div class = "first"></div>
                                <div class = "second"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4">
                    <div class = "card">
                        <div class = "header">
                            <div class = "hw-logo third"></div>
                            <div class = "label-hw-info">
                                <div class = "hw-type">Storage</div>
                                <div class = "hw-name" th:text = "${info.storage.mainStorage}"></div>
                            </div>
                        </div>
                        <div class = "usage">
                            <div class = "card-body-squares-grid third">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class = "main-hw-info">
                                <div class = "hw-usage">
                                    <div class = "usage-value">
                                        <span id = "storage-hundreds" class = "first">0</span>
                                        <span id = "storage-tens" class = "second">0</span>
                                        <span id = "storage-ones" class = "third">0</span>
                                    </div>
                                    <div class = "usage-postfix">%</div>
                                </div>
                                <div class = "info-label">STORAGE USAGE</div>
                                <div class = "usage-underline third"></div>
                            </div>
                        </div>
                        <div class = "footer third">
                            <div class = "card-footer-dots-grid">
                                <div class = "first">
                                    <div class = "inner-dot"></div>
                                </div>
                                <div class = "second">
                                    <div class = "inner-dot"></div>
                                </div>
                                <div class = "third">
                                    <div class = "inner-dot"></div>
                                </div>
                            </div>
                            <div class = "detailed-hw-info">
                                <div id = "currentTotalStorage" class = "first" th:text = "${info.storage.total}"></div>
                                <div id = "currentDiskCount" class = "second" th:text = "${info.storage.diskCount}"></div>
                                <div class = "third" th:text = "${info.storage.swapAmount}"></div>
                            </div>
                            <div class = "dividers">
                                <div class = "first"></div>
                                <div class = "second"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <script type = "text/javascript" th:inline = "javascript"> labelsInitialization(); </script>
                <div class = "col-sm-12 col-md-6 col-lg-6 col-xl-4 sm-hidden">
                    <div class = "card">
                        <div class = "controls">
                            <img id = "first-control" class = "first" th:src = @{/img/controls/left.png} />
                            <img id = "second-control" class = "second" th:src = @{/img/controls/right.png} />
                        </div>
                        <div class = "pages">
                            <div id = "logo-page" class = "first">
                                <div class = "logo">WARD</div>
                                <div class = "logo-description">SERVER DASHBOARD</div>
                            </div>
                            <div id = "contacts-page" class = "second">
                                <div class = "contacts-label">CONTACTS</div>
                                <div class = "contacts-description">
                                    <div class = "first">Feel free to ask questions and leave feedback</div>
                                    <div class = "second">You can also text author in Telegram</div>
                                </div>
                                <div class = "contacts-links">
                                    <a href = "https://github.com/B-Software/Ward">
                                        <img class = "first" th:src = @{/img/links/github.png} />
                                    </a>
                                    <a href = "https://t.me/Rudolf_Barbu">
                                        <img class = "second" th:src = @{/img/links/telegram.png} />
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class = "clouds">
                            <img id = "cloud-left" class = "first" th:src = @{/img/logo/clouds/left.png} />
                            <img id = "cloud-right" class = "second" th:src = @{/img/logo/clouds/right.png} />
                        </div>
                        <img class = "background" th:src = @{/img/logo/background.png} />
                        <div class = "uptime">
                            <div class = "uptime-squares-grid">
                                <div class = "first"></div>
                                <div class = "second"></div>
                                <div class = "third"></div>
                            </div>
                            <div class = "uptime-rectangle-grid">
                                <div class = "values-grid">
                                    <div><p id = "uptime-days" th:text = "${info.uptime.days}"></p></div>
                                    <div><p id = "uptime-hours" th:text = "${info.uptime.hours}"></p></div>
                                    <div><p id = "uptime-minutes" th:text = "${info.uptime.minutes}"></p></div>
                                    <div><p id = "uptime-seconds" th:text = "${info.uptime.seconds}"></p></div>
                                </div>
                                <div class = "labels-grid">
                                    <div>DAYS</div>
                                    <div>HOURS</div>
                                    <div>MINUTES</div>
                                    <div>SECONDS</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "col-lg-12 col-xl-8 sm-hidden">
                    <div class = "card">
                        <div class = "chart-label">% Utilization</div>
                        <div class = "chart-triangle-grid">
                            <div id = "processor-triangle" class = "first"></div>
                            <div id = "ram-triangle" class = "second"></div>
                            <div id = "storage-triangle" class = "third"></div>
                        </div>
                        <div class = "chart-rectangle-grid">
                            <div id = "processor-rectangle" class = "first"></div>
                            <div id = "ram-rectangle" class = "second"></div>
                            <div id = "storage-rectangle" class = "third"></div>
                        </div>
                        <div class = "chart-container">
                            <canvas id = "chart-body"></canvas>
                        </div>
                        <script type = "text/javascript" th:inline = "javascript"> chartInitialization(); </script>
                    </div>
                    <div id = "project-version" class = "text-center" th:text = "${info.project.version}"></div>
                </div>
            </div>
        </div>
        <script type = "text/javascript" th:inline = "javascript"> indexInitialization(); </script>
    </body>
</html>